<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="menu.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script>
	$(function() {
		
		$("#divTabelaUsuarios").load("ajax/atualizaTabelaUsuario.jsp");		 
		
		$("#btnNovoUsuario").button().click(function(){
			$.ajax({
				url:"cadastrarUsuario.jsp",
				beforeSend : function() {
					document.documentElement.style.cursor = 'progress';
					$("#dialogCarregando").dialog("open");
				},
				success : function(html) {
					$("#dialogCadastrarUsuario").html(html);
					$("#dialogCadastrarUsuario").dialog("open");
					document.documentElement.style.cursor = 'default';
					$("#dialogCarregando").dialog("close");
				},
				error:function(){
					$("#dialogCadastrarUsuario").html("");
					$("#dialogCadastrarUsuario").dialog("close");
					document.documentElement.style.cursor = 'default';
					$("#dialogCarregando").dialog("close");
				}
			});
		});
		
		$("#dialogCadastrarUsuario").dialog({
			resizable : false,
			draggable : false,
			autoOpen : false,
			height : 'auto',
			width : 'auto',
			modal : true,
			buttons : {
				"Cadastrar" : function() {
					var form = $("#formCadastrarUsuario").serialize();
					$.ajax({
						url:"cadastrarUsuarioServlet",
						data: form,
						beforeSend:function(){
							$("#mensagemCadastrarUsuario").html("Cadastrando...");
						},
						success:function(html){
							if(html == ""){
								$("#divTabelaUsuarios").load("ajax/atualizaTabelaUsuario.jsp");
								$("#dialogCadastrarUsuario").dialog("close");
							}else{
								$("#mensagemCadastrarUsuario").html(html);
							}
						},
						error:function(){
							$("#mensagemCadastrarUsuario").html("Erro de conexão!");
						}
					});
					
				},
				Cancelar : function() {
					$(this).dialog("close");
				}

			},
			close : function() {
				$(this).html("");
			}
		});
		
		
		$("#dialogAlterarUsuario").dialog({
			resizable : false,
			autoOpen : false,
			height : 'auto',
			width : 'auto',
			modal : true,
			buttons : {
				"Salvar alteração" : function() {
					var form = $("#formAlterarUsuario").serialize();
					$.ajax({
						url:"alterarUsuarioServlet",
						data: form,
						beforeSend:function(){
							$("#mensagemAlterarUsuario").html("Alterando...");
						},
						success:function(html){
							if(html == ""){
								$("#divTabelaUsuarios").load("ajax/atualizaTabelaUsuario.jsp");
								$("#dialogAlterarUsuario").dialog("close");
							}else{
								$("#mensagemAlterarUsuario").html(html);
							}
						},
						error:function(){
							$("#mensagemAlterarUsuario").html("Erro de conexão!");
						}
					});
					
				},
				Cancelar : function() {
					$(this).dialog("close");
				}

			},
			close : function() {
				$(this).html("");
			}
		});
		
		$("#dialogExcluirUsuario").dialog({
			resizable : false,
			draggable : false,
			autoOpen : false,
			height : 134,
			width : 450,
			modal : true,
			buttons : {
				"Sim" : function() {
					var id = $("#idExcluirUsuario").val();
					$.ajax({
						url:"removeUsuarioServlet",
						data:{id: id},
						beforeSend : function() {
							window.document.documentElement.style.cursor = 'progress';
							$("#msnExcluirUsuario").html("Excluindo...");
						},
						success : function(html) {
							if(html == ""){
								$("#msnExcluirUsuario").html("Excluido.");
								$("#"+id).remove();
								window.document.documentElement.style.cursor = 'default';
								$("#dialogExcluirUsuario").dialog("close");
							}else{
								$("#msnExcluirUsuario").html(html);
							}
						},
						error:function(){
							window.document.documentElement.style.cursor = 'default';
						}
					});
					
				},
				Não : function() {
					$(this).dialog("close");
				}

			},
			close : function() {
				$("#idExcluirUsuario").val("");
				$("#msnExcluirUsuario").html("");
			}
		});
		
	});
	
	function alterarUsuario(id){
		$.ajax({
			url:"alterarUsuario.jsp",
			data:{id: id},
			beforeSend : function() {
				document.documentElement.style.cursor = 'progress';
				$("#dialogCarregando").dialog("open");
			},
			success : function(html) {
				$("#dialogAlterarUsuario").html(html);
				$("#dialogAlterarUsuario").dialog("open");
				document.documentElement.style.cursor = 'default';
				$("#dialogCarregando").dialog("close");
			},
			error:function(){
				$("#dialogAlterarUsuario").html("");
				$("#dialogAlterarUsuario").dialog("close");
				document.documentElement.style.cursor = 'default';
				$("#dialogCarregando").dialog("close");
			}
		});
	};
	
	function excluirUsuario(id, nome){
		$("#msnExcluirUsuario").html("<span class='ui-icon ui-icon-alert' style='float:left; margin:0 7px 20px 0;'></span>Realmente deseja excluir o funcionário '"+nome+"' ?");
		$("#idExcluirUsuario").val(id);
		$("#dialogExcluirUsuario").dialog("open");
		
	};
	
</script>
</head>
<body>
	<fieldset class="ui-corner-all"
		style="margin-top: 10px; margin-bottom: -10px; width: 60%; padding-left: 0px; padding-right: 0px;">
		<legend class="ui-corner-all" style="font-size: 14px; margin-left: 8px;">Usuários do Sistema</legend>
		<p>
			<button id="btnNovoUsuario" style="margin-left: 8px;">Novo Usuário</button>
		</p>
		<div id="divTabelaUsuarios">
			<div style="font-weight: bold;">Carregando dados...</div> 
		</div>
	</fieldset>
	<!-- dialogs -->
	<div id="dialogCadastrarUsuario" title="Cadastrar Usuário"></div>
	<div id="dialogAlterarUsuario" title="Alterar Usuário"></div>
	<div id="dialogExcluirUsuario" title="Excluir Usuário">
	<p id="msnExcluirUsuario"></p>
	<input type="hidden" id="idExcluirUsuario">
	</div>
</body>
</html>